<template>
    <div class="goodsShop list-wrap-pk">
        <div class="list-item-pk">
            <div class="shopInfo">
                <div class="shopLogo">
                    <img :src="require('@img/app-logo.png')"
                         alt="logo"
                         class="logoImg">
                </div>
                <div class="shopName">
                    <div class="h15-pk ellipsis-single-pk">{{shopInfo.shopName}}</div>
                    <div>商品数量: {{shopInfo.goodsNum}}</div>
                </div>
                <div class="shopOperate">
                    <div class="shopType">
                        <img :src="require('@img/shop-type-icon.png')" alt="shopType">
                        <div class="typeMes">{{shopInfo.shopRole}}</div>
                    </div>
                    <div class="btnWrap">
                        <div class="btnAll">全部商品</div>
                        <div class="btnIn">进店逛逛</div>
                    </div>
                </div>
            </div>
            <div class="shopScore item-content-pk">
                <div>商品描述: <span class="text-light-pk">--</span></div>
                <div>服务态度: <span class="text-light-pk">--</span></div>
                <div>物流服务: <span class="text-light-pk">--</span></div>
            </div>
        </div>
        <div class="shopRecommend">
            <pk-cell title="店铺推荐" is-link value="查看全部" value-class="rightValue"></pk-cell>
            <van-row class="goodsList">
                <van-col span="8" v-for="item in goodsList" :key="item.goodsId" class="goodsWrap">
                    <div>
                        <div class="goodsImgContent">
                            <div class="imgWrap">
                                <img :src="item.goodsThumb" alt="商品图片">
                            </div>
                        </div>
                        <div class="goodsName ellipsis-2-pk">海南红心火龙果新鲜包邮水dsdsds 果当季…</div>
                        <div class="text-red-pk text-center-pk">￥39.80</div>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
    import PkCell from "../../components/PkCell";
    //import PkImg from "../../components/PkImg";
    export default {
        name: "goodsShop",
        props: {
            shopId: {
                type: String,
                default: ""
            },
            shopInfo: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        components: { PkCell},

        data() {
            return {
                goodsList: [],
                shopDimension: {}
            }
        },
        mounted() {
            if(this.shopId) {
                this.initData()
            }
        },
        computed: {},
        watch: {
            shopId(val) {
                if(val) {
                    this.initData()
                }
            }
        },
        methods: {
            initData() {
                this.getGoodsInfoList();
                this.shopDimension = this.shopInfo.shopDimension;
            },
            getGoodsInfoList() {
                this.$api.getGoodsInfoList({
                    page: 1,
                    size: 6,
                    shopId: this.shopId
                }).then(res => {
                    let result = this.$resArr(res);
                    if(result) {
                        this.goodsList = result.list;
                    }
                })
            },
            //获取店铺详情
            getShopInfo(){
                this.$api.getShopInfo(this.shopId).then(res => {
                    let result = this.$resData(res);
                    if(result) {
                        this.shopInfo = result;
                        this.shopDimension = result.shopDimension;
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goodsShop {
        padding-top: 15px;
        .shopInfo {
            display: flex;
            height: 60px;
            .shopLogo {
                .logoImg {
                    width: 50px;
                    height: 50px;
                    border-radius: 4px;
                    font-size: 0;
                }
            }
            .shopName {
                flex: 1;
                overflow: hidden;
                padding: 4px 6px 8px 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .shopOperate {
                width: 140px;
                .shopType {
                    position: relative;
                    >img{
                        width: 100px;
                    }
                    .typeMes {
                        position: absolute;
                        color: var(--white-color);
                        top: 7px;
                        left: 35px;
                        font-size: 12px;
                    }
                }
                .btnWrap {
                    display: flex;
                    justify-content: space-between;
                    >div {
                        width: 65px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        border: 1px solid;
                        border-radius: 20px;
                    }
                    .btnAll {
                        color: var(--red-color);
                        border-color: var(--red-color);
                    }
                    .btnIn {
                        color: var(--white-color);
                        border-color: var(--red-color);
                        background: var(--red-color);
                    }
                }
            }
        }
        .shopScore {
            display: flex;
            justify-content: space-between;
        }
        .shopRecommend {
            /deep/ .rightValue{
                color: var(--red-color) !important;
            }
            /deep/.van-cell__right-icon {
                color: var(--red-color) !important;
            }
            .goodsList {
                padding-left: 7px;
                padding-right: 7px;
                .goodsWrap {
                    padding: 8px;
                    .goodsName {
                        margin: 8px 0;
                    }
                }
                .goodsImgContent {
                    width:100%;
                    height:0;
                    padding-bottom:100%;
                    position:relative;
                    img{
                        border-radius: 4px;
                        width:100%;
                        height:100%;
                        position:absolute;
                    }
                }
            }
        }
    }
</style>
